class: center, middle, inverse, title-slide .title[ # Title ] .subtitle[ ## Subtitle ] .author[ ### Author ] .date[ ### Date ] --- # Installing These are slides made with the **xaringan** package which is on CRAN available, but I recommend installing the development release from <svg viewBox="0 0 496 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg"> <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg> ``` r devtools::install_github('yihui/xaringan') ``` .pull-left[ You will also need two other CSS files for the custom University of Duisburg-Essen styling: - `edu_fonts.css` - `edu.css` ] .pull-right[ If you want the University signet to show up on the title slide, you'll also need: - `signet_ude_rgb_neg.png` ] These are available in the assets folder of the GitHub code repository [<svg viewBox="0 0 496 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg"> <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg> `jens-klenke/ude_slides`](https://github.com/jens-klenke/ude_slides/tree/main/01_slides/assets) To make things easy to get started, I recommend downloading a copy of the `ude_slides` repo [<svg viewBox="0 0 384 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg"> <path d="M128.3 160v32h32v-32zm64-96h-32v32h32zm-64 32v32h32V96zm64 32h-32v32h32zm177.6-30.1L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM256 51.9l76.1 76.1H256zM336 464H48V48h79.7v16h32V48H208v104c0 13.3 10.7 24 24 24h104zM194.2 265.7c-1.1-5.6-6-9.7-11.8-9.7h-22.1v-32h-32v32l-19.7 97.1C102 385.6 126.8 416 160 416c33.1 0 57.9-30.2 51.5-62.6zm-33.9 124.4c-17.9 0-32.4-12.1-32.4-27s14.5-27 32.4-27 32.4 12.1 32.4 27-14.5 27-32.4 27zm32-198.1h-32v32h32z"></path></svg>](https://github.com/jens-klenke/ude_slides/archive/main.zip) and make changes to the slides. ??? NOTES NOTES --- # xaringan - Press `h` or `?` to see the possible shortcuts you can use in remark.js. - You can see all the goodies like this (hint press `p`). - Check out more in-depth tutorial [here](https://slides.yihui.name/xaringan/#1) --- ## Why xaringan/remark.js? <svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;fill:#004c93;float:right;" xmlns="http://www.w3.org/2000/svg"> <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z"></path></svg> - Printing (in Google Chrome) is a lot more reliable for xaringan/remark.js - The customisation of the CSS and using it is a lot easier in xaringan/remark.js - You almost never need to write any manual HTML chunks (e.g. `<div style="text-align: center;"></div>`) - With remark.js' Markdown, you can add arbitrary CSS classes to elements using syntax `.className[elements]`, which is very handy compared to `<span class="className"></span>` - You can write slide notes under three question marks `???`. These notes are only displayed in the presentation mode, and only the speaker can see these notes. - The keyboard shortcuts: press keys like `P` (presentation mode), `C` (clone slides to a new window, useful for presentation mode), `B` (black out), `M` (mirror the slide), and `H` (help), etc. More: [yihui.name/en/2017/08/why-xaringan-remark-js/](https://yihui.name/en/2017/08/why-xaringan-remark-js/) --- # YAML, Slides and Notes The `YAML` is the head of the document in which one defines all the settings and certain aspects as author, title, date. To start a new slide use three dashes `---` on a new line with no trailing white space. If the dashes aren't on their own line or there's a white space after it won't work. ``` --- ``` If we want to change the style of a slide we can do so with the option `class` directly after the three dashes for a new slide. ``` --- class: columns-2 ``` Similar to start a new line use three questionmarks `???` on a new line with no trailing white space, to take notes for your presentation. ``` ??? ``` --- # Embaded `R` Code .font70[ With Rmarkdown/xaringan `R` code can directly implemented. There are two ways to implement R Code. If we want to use r code *inline*, we wrap the command around .ilr[r ]. For example if we want to write some continuous text which tells us how many variables the `mtcars` data set has, we just write .ilr[r dim(mtcars)[2]] (`mtcars` has 11 variables). For bigger outputs, for instance plots or a summary of a `lm` object, there exists an other method. We start a new line with .olr[{r}] and start in the next line with our `R` code, to close the `R`-chunk we just write .olr[ ]. Example: .pull-left[ ``` r ggplot2::ggplot(mtcars, aes(x = mpg, y = hp))+ geom_point()+ theme_minimal() ``` ] .pull-right[ <!-- --> ]] .pull-down[ More information how to use and format `R` output in a `R Markdown` can be found on the [RStudio](https://rmarkdown.rstudio.com/lesson-1.html) site. ] --- # Scrolling `R` Output If you just want a section of the output to be scrollable (not the whole page). You need to define how many lines you want the "box" to show. There are classes for `.scroll-box-8[]` for 8 lines, `.scroll-box-10[]` for 10 lines, ... , `.scroll-box-20[]` for 20 lines. ### Example `.scroll-box-8[]` .scroll-box-8[ ``` r swiss[,1:3] ``` ``` ## Fertility Agriculture Examination ## Courtelary 80.2 17.0 15 ## Delemont 83.1 45.1 6 ## Franches-Mnt 92.5 39.7 5 ## Moutier 85.8 36.5 12 ## Neuveville 76.9 43.5 17 ## Porrentruy 76.1 35.3 9 ## Broye 83.8 70.2 16 ## Glane 92.4 67.8 14 ## Gruyere 82.4 53.3 12 ## Sarine 82.9 45.2 16 ## Veveyse 87.1 64.5 14 ## Aigle 64.1 62.0 21 ## Aubonne 66.9 67.5 14 ## Avenches 68.9 60.7 19 ## Cossonay 61.7 69.3 22 ## Echallens 68.3 72.6 18 ## Grandson 71.7 34.0 17 ## Lausanne 55.7 19.4 26 ## La Vallee 54.3 15.2 31 ## Lavaux 65.1 73.0 19 ## Morges 65.5 59.8 22 ## Moudon 65.0 55.1 14 ## Nyone 56.6 50.9 22 ## Orbe 57.4 54.1 20 ## Oron 72.5 71.2 12 ## Payerne 74.2 58.1 14 ## Paysd'enhaut 72.0 63.5 6 ## Rolle 60.5 60.8 16 ## Vevey 58.3 26.8 25 ## Yverdon 65.4 49.5 15 ## Conthey 75.5 85.9 3 ## Entremont 69.3 84.9 7 ## Herens 77.3 89.7 5 ## Martigwy 70.5 78.2 12 ## Monthey 79.4 64.9 7 ## St Maurice 65.0 75.9 9 ## Sierre 92.2 84.6 3 ## Sion 79.3 63.1 13 ## Boudry 70.4 38.4 26 ## La Chauxdfnd 65.7 7.7 29 ## Le Locle 72.7 16.7 22 ## Neuchatel 64.4 17.6 35 ## Val de Ruz 77.6 37.6 15 ## ValdeTravers 67.6 18.7 25 ## V. De Geneve 35.0 1.2 37 ## Rive Droite 44.7 46.6 16 ## Rive Gauche 42.8 27.7 22 ``` ] .pull-down[ Customized scroll boxes must be first implemented in the `edu.css` file. ] --- ## Lists, Increments and Footnotes<svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;fill:#004c93;float:right;" xmlns="http://www.w3.org/2000/svg"> <path d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg> .pull-left[ - Unordered lists<sup>1</sup> - can be created using "-" - and they can be nested using 2 or 4 space.fn[2] - deep nested - original nesting level ### Ordered list 1. one 2. two 3. three ] .footnote[ [1] Footnotes are not automatic. In the text use `<sup>1</sup>` or `.fn[1]` [2] At the end of the slide `.footnote[[1] Text associated with footnote 1.]` ] -- .pull-right[ To get an incremental slide use two dashes `--` on a new line with no trailing white space. If the dashes aren't on their own line or there's a white space after it won't work. .font80[.content-box-purple[ The two dash increments don't work inside class calls. For example, you can't have an increment in a `.pull-right[...]` block or in a `.columns-2[...]` block as the dashes are not considered to be special in the markdown processing when they're inside one of these blocks. ]] ] --- # Annimated Graphics ``` r knitr::include_graphics("assets/power_with_densities.gif") ``` <img src="data:image/png;base64,#assets/power_with_densities.gif" width="30%" style="display: block; margin: auto;" /> --- # Interactive Graphics ``` r x <- seq_len(nrow(volcano)) y <- seq_len(ncol(volcano)) plot_ly() %>% add_surface(x = ~x, y = ~y, z = ~volcano) ```
--- # Interactive Maps .font70[ ``` r library(leaflet) leaflet() %>% addTiles() %>% setView(7.008403713908398, 51.46402372535478, zoom = 16) %>% addPopups(7.008403713908398, 51.46402372535478, '<b>Chair of Econometrics', options = popupOptions(closeButton = FALSE) ) ```
] --- # Embeded videos .center[ <iframe width="560" height="315" src="https://www.youtube.com/embed/vZMuu77ocMY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ] --- ## Content boxes <svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;fill:#004c93;float:right;" xmlns="http://www.w3.org/2000/svg"> <path d="M509.5 184.6L458.9 32.8C452.4 13.2 434.1 0 413.4 0H272v192h238.7c-.4-2.5-.4-5-1.2-7.4zM240 0H98.6c-20.7 0-39 13.2-45.5 32.8L2.5 184.6c-.8 2.4-.8 4.9-1.2 7.4H240V0zM0 224v240c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V224H0z"></path></svg> .content-box-blue[This is a `.content-box-blue[]` chunk. ] -- If you have just a few words, it only highlights the words: .content-box-army[`.content-box-army[]`] .content-box-yellow[`.content-box-yellow[]`] .content-box-red[`.content-box-red[]`] .content-box-purple[`.content-box-purple[]`] -- If the text includes a new line character, you get a 100% width box. I've used `.columns-2[]` it's 100% of the column width. .columns-2[ .content-box-gray[ `.content-box-gray[]` ] .content-box-green[ `.content-box-green[]` ] ] --- ## Quotes <svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;fill:#004c93;float:right;" xmlns="http://www.w3.org/2000/svg"> <path d="M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z"></path></svg> .small[ We can include **block quotes** using<br> `<blockquote>Quote goes here</blockquote>` or<br> `> Quote goes here` or `.blockquote[Quote here]` ] .pull-left[ <blockquote> Statistics is the grammar of science. .right[-- <cite>Karl Pearson</cite>] </blockquote> .blockquote[Quote] > Quote quote ] .pull-right[.small[ ``` <blockquote> Statistics is the grammar of science. .right[-- <cite>Karl Pearson</cite>] </blockquote> .blockquote[Quote] > Quote quote ``` ]]